<template>
   <div class="new-product">
    <ProductPartitionHeader :title="partition.title" :description="partition.description" />

   <!-- 循环渲染ProductCard -->
    <div class="carousel-layout">
      <div class="carousel-text">
        <el-carousel
          height="600px"
          indicator-position="outside"
          arrow="always"
          :autoplay="true"
          class="revolving-lantern"
        >
          <!-- 按3个产品一组拆分 -->
          <el-carousel-item
            v-for="(group, index) in productGroups"
            :key="index"
          >
            <div class="products">
              <ProductCard
                v-for="(product, idx) in group"
                :key="idx"
                :product="product"
                class="Commodity-box"
              />
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import ProductPartitionHeader from './ProductPartitionHeader.vue';
import ProductCard from '@/components/product-card/ProductCard.vue';
import { listProductsByPartitionId } from '@/api/partition.js'

const props = defineProps({
  partition: {
    type: Object,
    default: () => {}
  }
})

const products = ref([]);

//将产品按每组3个拆分（轮播项）
const productGroups = computed(() => {
  const groups = [];
  for (let i = 0; i < products.value.length; i += 3) {
    groups.push(products.value.slice(i, i + 3));
  }
  return groups;
});

onMounted(() => {
  // console.log(props.partition)
  listProductsByPartitionId(props.partition.id).then(res => {
    console.log(res.data)
    res.data.forEach(prod => prod.imageUrl = import.meta.env.VITE_APP_BASE_FILE + prod.mainImage)
    products.value = res.data
  })
})

</script>

<style scoped>
/* 轮播图 */
.carousel-layout {
  width: 100%; /* 铺满视口宽度 */
  display: flex;
  justify-content: center;
}
.carousel-text {
  width: 64%;
  display: flex;
  justify-content: center;
}
.revolving-lantern {
  width: 100%;
  height: 100%;
}
.products {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
}
.Commodity-box {
  width: calc((100% - 40px) / 3); /* 每行3个，减去间距 */
  box-sizing: border-box;
  margin-bottom: 20px;
}
/* 去掉箭头 */
:deep(.el-carousel__arrow) {
  display: none;
}
</style>
